<template>
  <div class="upload-wrap" :style="cssVariables">
    <div class="title-wrap" v-if="title">
      <span style="color: red;">*</span>
      <span>{{ title }}:</span>
    </div>
    <el-upload
      :class="[
        'upload-contract',
        { 'reach-limit': displayFileList.length >= limit },
      ]"
      drag
      :action="basePath + 'base/file/uploadImg'"
      :multiple="multiple"
      :limit="limit"
      :list-type="listType"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :before-upload="handleBeforeUpload"
      :file-list="displayFileList"
      :data="extralParams"
    >
      <i slot="default" class="el-icon-plus"></i>
      <template slot="tip">
        <slot name="tip"></slot>
      </template>
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            v-if="canPreview"
            class="el-upload-list__item-preview"
            @click="handlePreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="canDownload"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span>
          <span
            v-if="canDelete"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <div class="preview-wrap">
        <img width="80%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { downloadFileUtil } from "@/utils/utils";
import configInfo from "@/config";

export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 1,
    },
    size: {
        type: [Number, String],
        default: 5
    },
    fileList: {
      type: Array,
      default: () => [],
    },
    listType: {
      type: String,
      default: "text",
    },
    accept: {
      type: String,
      default: "image/png,image/jpeg,image/gif,image/bmp,image/jpg",
    },
    canDownload: {
      type: Boolean,
      default: false,
    },
    canPreview: {
      type: Boolean,
      default: true,
    },
    canDelete: {
      type: Boolean,
      default: true,
    },
    extralParams: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: [Number, String],
      default: 0,
    },
    height: {
      type: [Number, String],
      default: 0,
    },
  },
  computed: {
    displayFileList: {
      get() {
        return this.fileList.map((item) => {
          if (item.resUrl) return item;
          return {
            url: configInfo.cdn + item.url,
            resUrl: item.url,
          };
        });
      },
      set(val) {
        const fileList = val.map((item) => {
          if (item.resUrl) return item;
          return {
            url: configInfo.cdn + item.response.data,
            resUrl: item.response.data,
          };
        });
        this.$emit("update:fileList", fileList);
      },
    },
    cssVariables() {
      return {
        "--el-upload-width": `${this.width || this.height || 100}px`,
        "--el-upload-height": `${this.height || this.width || 100}px`,
      };
    },
  },

  data() {
    return {
      basePath: process.env.VUE_APP_URL,
      configInfo,
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },

  mounted() {},

  methods: {
    handleSuccess(res, file, fileList) {
      if (res.code === 200) {
        this.displayFileList = fileList;
      } else {
        fileList.pop();
        this.displayFileList = fileList;
      }
    },
    handleRemove(file) {
      this.displayFileList.splice(this.displayFileList.findIndex((item) => item.url === file.url), 1);  
      this.$emit("update:fileList", this.displayFileList);
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed() {
      this.$message.error(`只能同时上传${this.limit}份文件`);
    },
    handleBeforeUpload(file) {
      const isImagOrPdf = this.accept.includes(file.type);
      const isLtSize = file.size / 1024 / 1024 < this.size;
      if (!isImagOrPdf) {
        this.$message.error(`文件仅支持${this.accept.join(",")}格式`);
        return false;
      }

      if (!isLtSize) {
        this.$message.error(`上传文件大小不能超过 ${this.size}MB!`);
        return false;
      }
      return isLtSize && isImagOrPdf;
    },
    handleDownload(file) {
      downloadFileUtil(file.resUrl);
    },
  },
};
</script>
<style lang="scss" scoped>
.upload-wrap {
  display: flex;
  align-items: flex-start;
  .title-wrap {
    margin-right: 20px;
    font-size: 13px;
    color: #333333;
  }
  .upload-contract {
    &.reach-limit {
      /deep/ .el-upload--picture-card {
        display: none;
      }
    }
    /deep/ .el-upload-list__item-status-label {
      display: none;
      transition: none; /* 禁止过渡效果 */
    }
    /deep/ .el-upload-list__item {
      background: transparent; /* 或设置为你希望的颜色 */
      transition: none; /* 禁止过渡效果 */
    }
    /deep/ .el-upload--picture-card {
      width: var(--el-upload-width);
      height: var(--el-upload-height);
      border: none;
    }
  
    /deep/ .el-upload-list--picture-card .el-upload-list__item {
      width: var(--el-upload-width);
      height: var(--el-upload-height);
    }
    /deep/ .el-upload-dragger {
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--el-upload-width);
      height: var(--el-upload-height);
    }
  }
}
.preview-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 80%;
  }
}
</style>
